import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {
  decrement,
  increment,
  incrementByAmount,
  incrementAsync,
  selectCount,
  changeUserInfo,
} from '@src/store/counterSlice';
import { Button, Input } from 'antd';
export const ReduxToolkit = () => {
  const count = useSelector(selectCount);
  const dispatch = useDispatch();
  const [incrementAmount, setIncrementAmount] = useState('2');

  return (
    <div>
      <div>
        <Button onClick={() => dispatch(increment())}>+</Button>
        <span>{count}</span>
        <Button onClick={() => dispatch(decrement())}>-</Button>
      </div>

      <div>
        <Input value={incrementAmount} onChange={(e) => setIncrementAmount(e.target.value)} />

        <Button onClick={() => dispatch(incrementByAmount(Number(incrementAmount) || 0))}>
          Add Amount
        </Button>

        <Button onClick={() => dispatch(incrementAsync(Number(incrementAmount) || 0))}>
          Add Async
        </Button>
        <Button
          onClick={() => dispatch(changeUserInfo({ name: Math.random() + '', age: Math.random() }))}
        >
          更改用户信息
        </Button>
      </div>
    </div>
  );
};
